<template>
  <div class="nnn-contain">
    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="8">
            <el-form-item label="行业名称/排序">
              <el-input v-model="selectName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="inquire">查询</el-button>
              <el-button type="warning" @click="resetData">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="margin10">
      <el-row type="flex" justify="space-around">
        <el-col :span="8" class="margin10">行业数量:{{ industry ? industry.length : 0 }}</el-col>
        <el-col :span="6">
          <el-button type="primary" @click="addIndustry(1)">新增行业</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="margin10">
      <el-row type="flex" justify="space-around">
        <el-col :span="2">行业名称</el-col>
        <el-col :span="2">
          排序
          <i class="el-icon-sort"/>
        </el-col>
        <el-col :span="6">操作</el-col>
      </el-row>
      <div v-if="isShow">
        <el-row
          v-for="item in industry"
          :key="item.id"
          type="flex"
          justify="space-around"
          class="margin10"
        >
          <el-col :span="2">{{ item.industryname }}</el-col>
          <el-col :span="2">{{ item.number }}</el-col>
          <el-col :span="6">
            <el-button type="primary" @click="editIndustry(item.id, 2)">编辑</el-button>
            <el-button type="danger" @click="delIndustry(item.id)">删除</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <el-row
          v-for="item in newList"
          :key="item.id"
          type="flex"
          justify="space-around"
          class="margin10"
        >
          <el-col :span="2">{{ item.industryname }}</el-col>
          <el-col :span="2">{{ item.id }}</el-col>
          <el-col :span="6">
            <el-button type="primary" @click="editIndustry(item.id, 2)">编辑</el-button>
            <el-button type="danger" @click="delIndustry(item.id)">删除</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <industrydialog ref="indusDialog" :show-dialog.sync="showDialog" :type="type"/>
  </div>
</template>

<script>
import {
  getIndustry,
  delIndustry,
  getIndustryById
} from '@/api/trade'
import industrydialog from './components/industrydialog'
import { async } from 'q'

// import { setData, getData } from '@/utils/localstorage'
export default {
  name: 'Nnn',
  components: {
    // industry,
    industrydialog
  },
  props: {},
  data() {
    return {
      industry: [],
      newList: [],
      selectName: '',
      showDialog: false,
      isShow: true,
      type: null
    }
  },
  created() {
    this.getIndustry()
  },
  methods: {
    // 查询 快做完了
    inquire() {
      this.newList = []
      if (this.selectName.trim().length > 0) {
        const flag = this.industry.some(item => {
          if (
            item.industryname === this.selectName ||
            item.number == this.selectName
          ) {
            this.$message.success('查询成功')
            this.isShow = false

            return this.newList.push(item)
          }
        })
        if (!flag) {
          this.$message.warning('你搜索的数据不存在')
        }
      }
    },
    // 重置
    async resetData() {
      this.$confirm('确定要重置数据吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.isShow = true
          this.getIndustry()
          this.selectName = ''
          this.$message({
            type: 'success',
            message: '重置数据成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      console.log('暂未想到处理逻辑')
    },
    // 删除
    delIndustry(id) {
      this.$confirm('确定要删除该行业吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delIndustry(id)
          this.getIndustry()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 新增
    addIndustry(type) {
      this.type = type
      this.showDialog = true
      this.$refs.indusDialog.flag = false
    },
    // 编辑
    async editIndustry(id, type) {
      this.showDialog = true
      this.type = type
      const data = await getIndustryById(id)
      this.$refs.indusDialog.flag = true
      this.$refs.indusDialog.indusForm = data
    },
    // 获取行业列表
    async getIndustry() {
      const data = await getIndustry()
      // console.log(data)
      this.industry = data
    }
  }
}
</script>

<style scoped>
.form-right {
  margin-left: 700px;
}
.margin10 {
  margin: 10px 0;
}
.col_red {
  color: red;
}
</style>
